import React from 'react';
import { Row, Col, Input, DatePicker, Button } from 'antd';
import EnglishCategory from '@/components/NewsCategory/NewsCategory'
import './FilterBar.less';

const { RangePicker } = DatePicker;

const FilterBar = (props) => (
  <div className="filter-bar">
    <EnglishCategory
      categoryListFifty={props.categoryListFifty}
      activeItem={props.activeItem}
      categoryStatus={props.categoryStatus}
      toChangeCategoryStatus={props.toChangeCategoryStatus}
      toChooseCategory={(name, id) => props.toChooseCategory(name, id)}
    />
    <div className="filter-bar-select">
      <Row>
        <Col span={9} className="flex-item">
          <label className="long-label-name">title:</label>
          <Input
            className="select-item"
            placeholder="please input the news title or key word"
            onChange={props.titleValueOnChange}
            value={props.titleValue} />
        </Col>
        <Col span={9} className="flex-item">
          <label className="long-label-name">Publisher:</label>
          <Input
            className="select-item"
            placeholder="please input the Ad. publisher"
            onChange={props.publisherValueOnChange}
            value={props.publisherValue} />
        </Col>
      </Row>
      <Row className="mt10">
        <Col span={9} className="flex-item">
          <label className="long-label-name">time:</label>
          <RangePicker
            className="select-item"
            style={{width: '70%'}}
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
            placeholder={['Start Time', 'End Time']}
            onOk={props.timeOnChange}
            onChange={props.timeChange}
            value={props.timeValue}
          />
        </Col>
        <Col span={6} offset={9}>
          <div className="filter-btn-group">
            <Button
              className="search-btn"
              type="primary"
              onClick={props.filterBarSearch}>search</Button>
            <Button
              className="reset-btn"
              onClick={props.filterBarReset}>reset</Button>
          </div>
        </Col>
      </Row>
    </div>
  </div>
)

export default FilterBar;
